<template>
  <el-container class="main-view">
    <!-- 侧边栏 -->
    <el-aside class="side" width="collapse">
      <el-menu
        class="el-menu-vertical"
        :default-active="active"
        :collapse="isCollapse"
        router
      >
        <template v-for="item in leftMenu.menuData">
          <template v-if="item.children">
            <el-sub-menu
              :index="item.url"
              v-if="item.children && item.children.length > 0"
            >
              <template #title
                ><el-icon><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="child in item.children">
                <el-menu-item
                  :index="child.url"
                  @click="toTab(child.title, child.url)"
                >
                  <el-icon><component :is="child.icon" /></el-icon
                  ><template #title>{{ child.title }}</template></el-menu-item
                >
              </template>
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item :index="item.url" @click="toTab(item.title, item.url)"
              ><el-icon><component :is="item.icon" /></el-icon>
              <template #title>{{ item.title }}</template></el-menu-item
            >
          </template>
        </template>
      </el-menu>
    </el-aside>
    <!-- 上边标签 （与侧边栏关联） -->
    <el-container>
      <el-header style="padding: 0">
        <!-- 头部 -->
        <CommonHeader ref="headerContent" @updateNarBar="updateNarBar" />
      </el-header>
      <el-main style="padding: 0; height: 100%">
        <div class="tags">
          <el-tag
            type="card"
            style="border-color: #c9d1d9"
            v-for="(tag, index) in editableTabs"
            :key="index"
            :closable="tag.title != '首页'"
            :effect="editableTabsValue === tag.title ? 'dark' : 'plain'"
            @click="tab_click(tag)"
            @close="removeTab(tag, index)"
            @contextmenu.native.prevent="rightClick($event, index)"
          >
            <i class="cir" v-show="tag.name == $route.name"></i>{{ tag.name }}
          </el-tag>
          <TagsMenuVue
            v-show="isShowTagsMenu"
            :clientX="clientX"
            :clientY="clientY"
            :clickIndex="clickIndex"
            :tagsLength="editableTabs.length"
            @fn="clickMenu"
          />
        </div>
        <!-- <el-card style="box-sizing: border-box">
          <el-tag
            class="tag"
            size="medium"
            :closable="tag.name != '首页'"
            v-for="(tag, index) in editableTabs"
            :key="indexh"
            @click="tab_click(tag)"
            @close="removeTab(tag, index)"
          >
            <i class="cir"  style=" width: 8px;
      height: 8px;
      margin-right: 4px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;"></i
            >{{ item.name }}
          </el-tag>
          <TagsMenuVue
            v-show="isShowTagsMenu"
            :clientX="clientX"
            :clientY="clientY"
            :clickIndex="clickIndex"
            :tagsLength="editableTabs.length"
            @fn="clickMenu"
        /></el-card> -->
        <!-- 导航栏 -->
        <router-view style="height: calc(100% - 39px)" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { menu } from "@/api/system/menu";
import CommonHeader from "../components/CommonHeader.vue";
import CommonAside from "../components/CommonAside.vue";
import TagsMenuVue from "@/components/TagsMenu.vue";
export default {
  components: {
    CommonHeader,
    CommonAside,
    TagsMenuVue,
  },
  data() {
    return {
      // tab栏
      isCollapse: false,
      editableTabsValue: "首页", //选中状态的 name
      editableTabs: [
        //默认存在的 tabs
        {
          title: "首页",
          name: "首页",
          path: "home",
        },
      ],
      // 侧边栏
      active: "home",
      leftMenu: {
        menuData: [],
      },
      isShowTagsMenu: false,
      clientX: 0,
      clientY: 0,
      clickIndex: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      menu().then((res) => {
        console.log("获取动态菜单栏", res);
        this.leftMenu.menuData = res.data;
        if (JSON.parse(sessionStorage.getItem("sessTabs")) == null) {
          sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
          sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
        } else {
          let sessTabs = JSON.parse(sessionStorage.getItem("sessTabs"));
          this.editableTabs = sessTabs;
          let sessTabsValue = JSON.parse(
            sessionStorage.getItem("sessTabsValue")
          );
          this.editableTabsValue = sessTabsValue;
        }
      });
    },
    //折叠菜单栏
    updateNarBar() {
      this.isCollapse = !this.isCollapse;
    },
    //添加 tabs 标签页 ,传递的 name 是title
    toTab(name, url) {
      this.active = url;
      //添加之前需要 判断是否已经包含，
      let isHave = false;
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].title == name) {
          //存在，包含
          isHave = true;
          this.editableTabsValue = this.editableTabs[i].name;
        }
      }
      if (isHave == false) {
        this.editableTabs.push({
          title: name,
          name: name,
          path: url,
        });
        this.editableTabsValue =
          this.editableTabs[this.editableTabs.length - 1].name;
      }
      //本地存储值
      sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
    },
    removeTab(targetName, tag, index) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      // //关闭当前页
      if (activeName === targetName.title) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName.title) {
            let nextTab = tabs[index + 1] || tabs[index - 1]; //下一个 next 打开的页面，有就下一个，没就上一个
            if (nextTab) {
              activeName = nextTab.name;
              this.active = nextTab.path;
              this.$router.push(nextTab.path);
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName.title);
      // 本地存储值
      sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
    },
    // 关闭选择菜单
    closeMenus() {
      this.isShowTagsMenu = false;
    },
    // 右键点击
    rightClick(e, i) {
      // console.log("右键点击了", e.clientX, e.clientY);
      const path = this.editableTabs[i];
      // this.editableTabsValue = path.path;
      this.toTab(path.title, path.path);
      sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
      this.isShowTagsMenu = true;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      this.clickIndex = i;  
    },
    // 点击标签跳转
    tab_click(tag) {
      let url = tag.path;
      if (this.$router.currentRoute.name !== url) {
        this.active = url;
        this.$router.push(url);
        this.closeMenus();
        if (JSON.parse(sessionStorage.getItem("sessTabs")) == null) {
          sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
          sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
        } else {
          let sessTabs = JSON.parse(sessionStorage.getItem("sessTabs"));
          this.editableTabs = sessTabs;
          let sessTabsValue = JSON.parse(
            sessionStorage.getItem("sessTabsValue")
          );
          this.editableTabsValue = sessTabsValue;
        }
      }
      // //存储选中状态
      this.toTab(tag.title, url);
    },
    // 点击操作之后实现
    clickMenu(i) {
      console.log(i);
      // 关闭其他，就保留自己的包含首页
      if (i === 0) {
        // 关闭其他，前提是保留首页
        let clickItem = [];
        clickItem = this.editableTabs.filter(
          (item, index) => index === this.clickIndex
        );
        const newTags = [
          { title: "首页", name: "首页", path: "/home" },
          ...clickItem,
        ];
        console.log(newTags, "关闭其他");
        if (newTags[1].path == "/home") {
          this.editableTabs = [{ title: "首页", name: "首页", path: "/home" }];
          this.closeMenus();
          sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
          sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
        } else {
          this.editableTabs = [
            { title: "首页", name: "首页", path: "/home" },
            ...clickItem,
          ];
          this.closeMenus();
          sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
          sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
        }
        // const activePath =
        //   newTags[1].path === "/home" ? "/home" : newTags[1].path;
        // this.tab_click(activePath);
      } else if (i === 1) {
        // 关闭左侧
        this.editableTabs.splice(1, this.clickIndex - 1);
        this.closeMenus();
        sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
        sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
      } else if (i === 2) {
        console.log(this.clickIndex + 1);
        // 关闭右侧
        // console.log(this.editableTabs[this.clickIndex]);
        // this.editableTabs.splice(this.clickIndex + 1);
        console.log(this.editableTabs.splice(this.clickIndex + 1));
        // this.editableTabs.splice(this.clickIndex + 1);
        // this.tab_click(this.editableTabs[this.clickIndex].path);
        this.closeMenus();
        sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
        sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
      } else {
        // 全部关闭
        // 1 处理数组
        this.editableTabs = [
          {
            title: "首页",
            name: "首页",
            path: "/home",
          },
        ];
        // 跳转到首页
        this.$router.push("/home");
        this.editableTabsValue = "首页";
        this.closeMenus();
        sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
        sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
      }
    },
  },
};
</script>

<style lang="scss">
.main-view {
  .tabs {
    .el-tabs__item.is-active {
      border-radius: 14px 14px 0 0;
    }
  }
  .el-menu-vertical,
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
    color: #fff;
  }
  .el-menu--collapse {
    width: 64px;
  }
  .titleName {
    font-size: 24px;
    font-weight: 600;
  }
  .menu {
    font-size: 14px;
  }
  .el-tabs__content {
    display: none;
  }
}
.tags {
  padding-top: 4px;
  display: flex;
  overflow-y: hidden;
  box-sizing: border-box;
  overflow-x: scroll;
  border: none;
  // background-color: white;
  // border-top: 1px solid #6b656561;
  // border-bottom: 1px solid #6b656561;
  .el-tag.is-closable {
    margin: 0 4px;
  }
  .cir {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
  }
}
</style>
